<h1>Dialog demo</h1>

<button md-raised-button color="primary" (click)="openJazz()">
  Open dialog
</button>
<button md-raised-button color="accent" (click)="openContentElement()">
  Open dialog with content elements
</button>
<button md-raised-button color="accent" (click)="openTemplate()">
  Open dialog with template content
</button>

<md-card class="demo-dialog-card">
  <md-card-content>
    <h2>Dialog dimensions</h2>

    <p>
      <md-input-container>
        <input mdInput [(ngModel)]="config.width" placeholder="Width">
      </md-input-container>
      <md-input-container>
        <input mdInput [(ngModel)]="config.height" placeholder="Height">
      </md-input-container>
    </p>

    <h2>Dialog position</h2>

    <p>
      <md-input-container>
        <input mdInput [(ngModel)]="config.position.top" (change)="config.position.bottom = ''" placeholder="Top">
      </md-input-container>
      <md-input-container>
        <input mdInput [(ngModel)]="config.position.bottom" (change)="config.position.top = ''" placeholder="Bottom">
      </md-input-container>
    </p>

    <p>
      <md-input-container>
        <input mdInput [(ngModel)]="config.position.left" (change)="config.position.right = ''" placeholder="Left">
      </md-input-container>
      <md-input-container>
        <input mdInput [(ngModel)]="config.position.right" (change)="config.position.left = ''" placeholder="Right">
      </md-input-container>
    </p>

    <h2>Dialog backdrop</h2>

    <p>
      <md-input-container>
        <input mdInput [(ngModel)]="config.backdropClass" placeholder="Backdrop class">
      </md-input-container>
    </p>

    <md-checkbox [(ngModel)]="config.hasBackdrop">Has backdrop</md-checkbox>

    <h2>Other options</h2>

    <p>
      <md-select placeholder="Button alignment" [(ngModel)]="actionsAlignment">
        <md-option>Start</md-option>
        <md-option value="end">End</md-option>
        <md-option value="center">Center</md-option>
      </md-select>
    </p>

    <p>
      <md-input-container>
        <input mdInput [(ngModel)]="config.data.message" placeholder="Dialog message">
      </md-input-container>
    </p>

    <p>
      <md-checkbox [(ngModel)]="config.disableClose">Disable close</md-checkbox>
    </p>
  </md-card-content>
</md-card>

<p>Last close result: {{lastCloseResult}}</p>

<ng-template>
  I'm a template dialog. I've been opened {{numTemplateOpens}} times!
</ng-template>
